<script setup>
import { useI18n } from "vue-i18n";
import { defineProps, inject, ref } from "vue";

const props = defineProps({
  stages: {
    type: Object,
    default: {},
  },
});
const modalsState = inject("modalsState");
const { t } = useI18n();
const buttons = ref([
  {label:"hangOrder",value:"",disabled:false,modalStatusKey:"pendingOrder"},
  {label:"recharge",value:"",disabled:true,modalStatusKey:"showRecharge"},
  {label:"points",value:"",disabled:true,modalStatusKey:""},
  {label:"eCoupon",value:"",disabled:true,modalStatusKey:""},
  {label:"changePrice",value:"",disabled:true,modalStatusKey:"showRecharge"},
  {label:"remark",value:"",disabled:true,modalStatusKey:"showMark"},
]);

const showModal = (key) => {
  modalsState[key] = true;
}

</script>
<template>
  <div class="w-full text-center">
    <a-button v-for="(item,index) in buttons" :key="index"
      :type="item.disabled === false ? 'outline' : null"
      :class="['mb-6', { 'transition-transform transform active:scale-95': item.disabled === false }]"
      shape="round"
      :disabled="item.disabled"
      @click="showModal"
      long
      >{{ t(item.label) }}</a-button
    >
  </div>
</template>

<style scoped lang="less">
</style>
